<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/assets/apple-icon-180x180.png">
    <link href="/static/assets/favicon.ico" rel="icon">
    <title>login page</title>
    <link href="/static/css/main.3f6952e4.css" rel="stylesheet">
    <style>

  video, canvas {
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;
  }
        .loginboxlogo{
    background-color: #2aaaf5;
	flex: 1;
	padding: 20px;
    box-sizing: border-box;
    display: flex;
	align-items: center;
}
        .wbody{
    font-family:'Microsoft YaHei';
}
.wrap{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* background:#8fd5f4; */
    /* background: linear-gradient(#6bc6ee, #fff); */
    background:#fff;

}
.search_form{
    width:640px;
    margin:100px auto 0;
}
.logo img{
    display:block;
    margin:0 auto;
}
.form_group{
    width:640px;
    height:40px;
    margin-top:45px;
}
.input_txt{
   width:538px;
   height:38px;
   padding:0px;
   float:left;
   border:1px solid #41a1cb;
   outline:none;
   text-indent:10px;
}

.input_sub{
    width:100px;
    height:40px;
    border:0px;
    float: left;
    background-color: #41a1cb;
    color:#fff;
    font-size:16px;
    outline:none;
    cursor: pointer;
    position: relative;
}
.input_sub.loading::before{
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/loading.gif');
}

.hotkey{
    margin:3px 0 0 2px;
}

.hotkey a{
    font-size:14px;
    color:#666;
    padding-right:15px;
}
.weather_list{
    height:200px;
    text-align:center;
    margin-top:50px;
    font-size:10px;
}
.weather_list li{
    display:inline-block;
    width:140px;
    height:200px;
    padding:0 10px;
    overflow: hidden;
    position: relative;

    background-size: 1px 130px;
}

.weather_list li:last-child{
    background:none;
}

/* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */


.info_date{
    width:100%;
    height:40px;
    line-height:40px;
    color:#999;
    font-size:14px;
    left:0px;
    bottom:0px;
    margin-top: 15px;
}
.info_date b{
    float: left;
    margin-left:15px;
}

.info_type span{
    color:#fda252;
    font-size:30px;
    line-height:80px;
}
.info_temp{
    font-size:14px;
    color:#fda252;
}
.info_temp b{
    font-size:13px;
}
.tem .iconfont {
    font-size: 50px;
  }
        body,ul,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}
img{
    border:0px;
}

/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,.clearfix:after{
    content:'';
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1;
}

.fl{
    float:left;
}
.fr{
    float:right;
}

    </style>
    <head/>
<body class="minimal" style="background-color: #00a2d4;">
<div id="site-border-left"></div>
<div id="site-border-right"></div>
<div id="site-border-top"></div>
<div id="site-border-bottom"></div>
<!-- Add your content of header-->
<header>
    <nav class="navbar  navbar-fixed-top navbar-default" style="background-color: #00a2d4;">
        <div class="container">
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav ">
                    <li><a href="{% url 'facerecognition:index' %}">01 : 首页</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.session.is_login %}
                    <li><a>你好,{{ request.session.user_name }}</a></li>
                    <li><a href="{% url 'users:logout' %}">登出</a></li>
                    {% else %}
                    <li><a href="{% url 'users:login' %}">登录</a></li>
                    <li><a href="{%  url 'users:register' %}">注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
</header>
<!-- Add your site or app content here -->
<!-- /container -->
<div class="section-container">
    <div class="container">
        <div class="row-input-top">
            <div class="col-xs-12">
                <div class="section-container-spacer text-center">
                    <h1 class="h2">欢迎登录</h1>
                </div>
                <div class="demo-container">
                    <video id="video" width="320" height="240" autoplay></video>
                    <canvas id="canvas" width="320" height="240"></canvas>
                </div>
                <div class="row-input text-center">
                    <div class="col-md-10 col-md-offset-1">
                        <form action="{% url 'users:login' %}" class="reveal-content"  method="post">
                             {% if message %}
                            <div class="alert alert-warning">{{ message }}</div>
                            {% endif %}
                            <div class="row-input-top">
                                <div class="col-md-7">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        {{ login_form.username }}
<!--                                        <input type="text" class="form-control" id="username" placeholder="{{ login_form.username.label_tag }}">-->
                                    </div>
                                    <div class="form-group">
                                        {{ login_form.password }}
<!--                                        <input type="password" class="form-control" id="password" placeholder="{{ login_form.password.label_tag }} ">-->
                                    </div>
                                    <button type="reset" class="btn btn-default pull-left">重置</button>
                                    <button type="submit" class="btn btn-default pull-right">登录</button>
                                    <p>没有账户？点此<a href="{% url 'users:register' %}">注册</a></p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      function getUserMediaToPhoto(constraints,success,error) {
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        }else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success,error);
        }else if(navigator.mozGetUserMedia){
            //firefox浏览器
            navigator.mozGetUserMedia(constraints,success,error);
        }else if(navigator.getUserMedia){
            //旧版API
            navigator.getUserMedia(constraints,success,error);
        }
    }
    //成功回调函数
    function success(stream){
        if ("srcObject" in video) {
            video.srcObject = stream;
        } else {

            video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function(e) {
            video.play();
        };
        postFace()
    }
    function error(error) {
        console.log('访问用户媒体失败：',error.name,error.message);
    }
    function postFace() {
        setTimeout(function () {
            context.drawImage(video,0,0,320,240);
            img=canvas.toDataURL('image/jpg')
            {#获取完整的base64编码#}
            img=img.split(',')[1]
            //将照片以base64用ajax传到后台
            $.ajax({
		        type:"POST",
                url:'get_face/',
                //必须添加 csrf_token
                beforeSend:function (xhr,setting) {
                    xhr.setRequestHeader("X-CSRFToken","{{ csrf_token }}");
                },
                data:{
                    message:img
                },
                success:function (callback) {
                    if(callback=='no'){
                        postFace()
                    }else {
                        window.location.href=callback
                    }
                },
                error:function (callback) {
                    postFace()
                }
            })
        },300)
    }
    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia)
    {
        getUserMediaToPhoto({video:{width:320,height:240}},success,error);
    }else{
        alert('你的浏览器不支持访问用户媒体设备');
    }
</script>

<script type="text/javascript" src="/static/js/main.70a66962.js"></script>
<script type="text/javascript" src="/static/js/jquery.js"></script>
</body>
</html>
